<template>
  <div class="container">
    <div class="sidebar"><Siderbar /></div>
    <div class="map-box">
      <Map />
    </div>
  </div>
</template>
<script setup lang="ts">
  import Map from '@/components/Map.vue';
  import Siderbar from './sidebar/index.vue';
</script>

<style scoped lang="scss">
  $--map-width: 85vw;
  .container {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    padding: 0.5em;
    .sidebar {
      width: 100vw - $--map-width;
      height: 100%;
      padding: 0.5em;
      background-color: rgb(40, 43, 50);
    }
    .map-box {
      flex: 1;
      width: $--map-width;
      height: 100%;
    }
  }
</style>
